
<template>
  <!-- 需要拖拽容器包裹 -->
  <dragWrap
    v-if="!notDragWrapList.includes(element.type)"
    :element="element"
    :parent="parent"
    :index="index"
    :key="index"
  >
    <component
      v-if="element"
      ref="ComponentRef"
      :is="element.type + '-widget-designer'"
      :element="element"
    ></component>
  </dragWrap>
  <!-- 不需要拖拽容器包裹 -->
  <div v-else>
    <component
      v-if="element"
      ref="ComponentRef"
      :is="element.type + '-widget-designer'"
      :element="element"
      :key="index"
    ></component>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, toRefs, inject, computed } from "vue";
import type { LowCodeImp } from "@/components/low-code/core/type";
import dragWrap from "@/components/low-code/page-designer/components/drag-wrap/index.vue";

export default defineComponent({
  components: { dragWrap },
  props: ["element", "parent", "index"],
  setup(props) {
    const notDragWrapList = ["dialog"]; //不需要拖拽包裹组件
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { element, parent } = toRefs(props);
    return {
      notDragWrapList,
      element,
      parent,
    };
  },
});
</script>

<style  scoped>
</style>
